<template>
  <!--<div class="main">-->
    <!--<nav-bar class="home-nav">-->
      <!--<div class="left" slot="left" @click="goBack">-->
        <!--<van-icon name="arrow-left" size="24"/>-->
      <!--</div>-->
      <!--<div slot="center">传感器数据</div>-->
    <!--</nav-bar>-->

    <!--<div class="calendar">-->
      <!--欢迎来到日历组件页面-->
      <!--<div class="calendar_show">-->
        <!--<div class="calendar_data">-->
          <!--<div class="time" v-for="(item,index) in monthArr" :key="index" v-if="active==index">-->
            <!--<van-icon name="arrow-left" @click="prev(index)" />-->
            <!--{{item.month}}-->
            <!--<van-icon name="arrow" @click="next(index)"/>-->
          <!--</div>-->
          <!--<div class="days">-->
            <!--<div @click="toCharts(item)" class="day" v-for="(item,index) in days" :key="index">{{item.day}}-->
              <!--<div v-if="item.is_h == 1" class="has"></div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <!--欢迎来到日历组件页面-->
    <!-- </div>-->
<!-- </div>-->
  <!--新改版的传感器数据样式-->
  <NewSensor></NewSensor>
  <!--新改版的传感器数据样式-->


</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar"
  import NewSensor from '../../../components/common/newsensor/NewSensor'
  export default {
    name: "Calendar",
    data() {
      return {
        bid: '',
        sid: '',
        times: [],//事件数组
        days: [],//天数数组
        time: '',//当前时间
        monthArr: [],
        month: '',//当前年月
      //  testdata: [{is_h: 1, month: "2020-10"}, {is_h: 1, month: "2020-11"}, {is_h: 1, month: "2020-12"}],
        active: 0,
      }
    },
    components: {
      NavBar,
      NewSensor
    },
    created() {
      this.bid = this.$route.query.bid;
      this.sid = this.$route.query.sid;
      this.getTimes();
    },
    methods: {
      getTimes() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getMonth?bid=" + that.bid + "&sid=" + that.sid, null, r => {
          this.times = r.data;
          console.log('年月', r.data);
          that.monthArr = r.data;
          this.month = r.data[0].month;
          this.getDays();
        });
      },

      //获取有视频数据的日期
      getDays() {
        let that = this;
        this.$http.get("/api/UserCheckApi/getDay?bid=" + that.bid + "&sid=" + that.sid + "&month=" + that.month
          , null, r => {
            console.log("视频天数：", r.data);
            this.days = r.data;
          });
      },//获取有视频日期的天数

      prev(i) {
        let that = this;
        if ((i - 1) <= 0) {
          this.active = 0;
          console.log('点击上一个！', this.active);
          this.getTimes();
        } else {
          this.active = (i - 1);
          console.log('点击上一个！', this.active);
          //获得天数
          this.$http.get("/api/UserCheckApi/getDay?bid=" + that.bid + "&sid=" + that.sid + "&month=" + that.monthArr[that.active].month
            , null, r => {
              console.log("视频天数：", r.data);
              this.days = r.data;
            });
          //获得天数

        }

      },
      next(i) {
        let that = this;
        if ((i + 1) >= (that.monthArr.length - 1)) {
          this.active = (that.monthArr.length - 1);
          console.log('点击下一个！', this.active);

          //获得天数
          that.$http.get("/api/UserCheckApi/getDay?bid=" + that.bid + "&sid=" + that.sid + "&month=" + that.monthArr[this.active].month
            , null, r => {
              console.log("视频天数：", r.data);
              this.days = r.data;
            });
          //获得天数
        } else {
          this.active = i + 1;
          console.log('点击下一个！', this.active);
          //获得天数
          this.$http.get("/api/UserCheckApi/getDay?bid=" + that.bid + "&sid=" + that.sid + "&month=" + that.monthArr[this.active].month
            , null, r => {
              console.log("视频天数：", r.data);
              this.days = r.data;
            });
          //获得天数
        }

      },

      toCharts(event) {
        console.log('eeee', event)
        let date = this.monthArr[this.active].month + "-" + event.day;
        console.log('时间', date);
        this.$router.push({path: '/sensor_detail', query: {bid: this.bid, sid: this.sid, date: date}});
      },

      goBack() {
        this.$router.go(-1);
      },
    },
  }
</script>

<style scoped>
  .calendar {
    height: calc(100vh - 44px - 44px - 15px);
    width: 100%;
  }

  .calendar_show {
    height: 377px;
    box-sizing: border-box;
    padding-top: 65px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .calendar_data {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 2%;
    overflow: hidden;
  }

  .time {
    height: 44px;
    background: var(--color-tint);
    font-size: 24px;
    color: white;
    line-height: 44px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .days {
    flex: 1;
    background: white;
    /*background: #ffffff;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .day {
    height: 38px;
    width: calc(100% / 5);
    font-size: 20px;
    text-align: center;
    line-height: 38px;
    position: relative;
  }

  .has {
    position: absolute;
    height: 8px;
    width: 8px;
    background: red;
    border-radius: 50%;
    bottom: 3%;
    left: 45%;
  }
</style>
